<template>
  <div class="dashboard-editor-container">
    <!-- 查询和其他操作 -->
    <el-form v-show="!showDetails" :inline="true" class="demo-form-inline">
      <!--<el-form-item label="客户名称">
        <el-select  @change="fsiteNoQueChange" v-model="listQuery.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
          <el-option
            v-for="item in getListfsiteNo"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>-->
      <el-form-item label="实验室">
        <div style="width: 220px;display:flex;justify-content:flex-end;align-items:center">
          <el-select style="display: inline-block;width:200px" clearable filterable v-model="listQuery.fpointNo" class="filter-item" placeholder="请选择实验室">
            <el-option
              v-for="item in getListfpointNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          <i style="display: inline-block;width:20px;color:#409EFF;margin-left:3px" class="el-icon-search" @click="searchDialoglab('search')"/>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          round
          size="medium"
          class="filter-item"
          :style="{background:buttonColor.lookup,color:buttonColor.color}"
          @click="handleFilter"
        >查找</el-button
        >
      </el-form-item>
    </el-form>
    <el-form v-show="showDetails">
      <el-form-item>
        <el-button :style="{background:buttonColor.edit,color:buttonColor.color}" round size="small" @click="showHeadList(item)"
        >返回</el-button>
      </el-form-item>
    </el-form>

      <div class="asd" v-for="(item,index) in dataList" :key="index" style="display:inline-block;width:45%">
          <div v-show="!showDetails" style="width:100%;display:flex;align-items: center;margin-top:20px">
              <div style="width:40%;margin-left:6%">
                 <div class="demo-image">
                   <p>{{item.fequipmenttag}}<el-button :style="{background:buttonColor.edit,color:buttonColor.color,marginLeft:'8px'}" round size="small" @click="showDetailList(index)"
                  >明细</el-button></p>
                    mac:{{item.fmacno}}
                  </div>
                <img style="width:100%;height:150px;background-size:100% 100%;" :src="browserUrl">
              </div>
              <div class="demo-image" style="position:relative;background:#000; width: 60%; height: 160px;">
                <div style="position:absolute;top:0;left:0">
                  <el-button v-if="item.state=='w'" disabled circle style="width:40px;height:40px;background: blueviolet; color: #FFFFFF;display: flex;justify-content: center;align-items: center;">传输</el-button>
                  <el-button v-else disabled circle style="width:40px;height:40px;background: #9aaabf; color: #FFFFFF;text-align: center;display: flex;justify-content: center;align-items: center;">传输</el-button>
                </div>
                <div style="position:absolute;top:50%;left:50%;color: #00e400; text-align: center; font-size: 83px;transform: translateY(-50%) translateX(-50%);">
                  {{item.weight}}
                </div>
                <div style="position:absolute;top:80%;left:0">
                        <el-button v-if="item.state=='o'" disabled circle style="width:40px;height:40px;background: #00e400; color: #FFFFFF;display: flex;justify-content: center;align-items: center;transform: translateY(-25%);">稳定</el-button>
                        <el-button v-else disabled circle style="width:40px;height:40px;background: #9aaabf; color: #FFFFFF;display: flex;justify-content: center;align-items: center;transform: translateY(-25%);">稳定</el-button>
                </div>
                <div style="position:absolute;top:80%;left:90%;text-align: right; font-size: x-large; color: #FFFFFF;">克</div>
              </div>
      </div>
      <div v-show="showDetails && detailIndex === index" class="demo-image" style="margin-top: 10px;width:222%">
        <el-table :data="item.details" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column :index="indexMethod" align="center" label="序" type="index" />
          <el-table-column align="center" label="设定重量" prop="setWeight" />
          <el-table-column align="center" label="实际重量" prop="weight" />
          <el-table-column align="center" label="速度" prop="gear" />
          <el-table-column align="center" label="计数" prop="count" />
          <el-table-column align="center" label="状态" prop="state" />
          <el-table-column :formatter="datetimeFormat" align="center" label="时间" prop="updateTime" />
          <!--<el-table-column :formatter="datetimeFormat" align="center" label="开始时间" prop="begDate" />
          <el-table-column :formatter="datetimeFormat" align="center" label="结束时间" prop="endDate" />-->
        </el-table>
      </div>
      <!--<br><br>-->
    </div>
    <labDialog :searchVisiblelab.sync="searchVisiblelab" :fsiteNo.sync="labDialogFsiteNo" :tableColor="tableColor" @labDialog="labDialogValue" />
  </div>
</template>

<script>
import request from '@/utils/request'
import { getPointOptions,getListArea } from '@/api/area'
import moment from "moment";
import LabDialog from '@/components/LabDialog'
import { tableColor,buttonColor } from '@/filters/index'

export default {
  name: 'Index',
  components: { LabDialog },
  data() {
    return {
      tableColor,
      buttonColor,
      getListfpointNoAll: null,
      getListfpointNo: null,
      labFlag:null,
      searchVisiblelab: false,
      labDialogFsiteNo:null,
      dataList: {
        fmacno: null,
        isOpen: null,
        isAlarming: null,
        state: null,
        weight: null,
        details: []
      },
      showDetails: false,
      detailIndex: 0,
      details: {
        setWeight: null,
        weight: null,
        gear: null,
        count: null,
        state: null,
        updateTime: null,
        begDate: null,
        endDate: null
      },
      browserUrl: './qualityEqt.png',
      listQuery: {
        fpointNo: undefined
      }
    }
  },
  created() {

    if(this.$store.state.user.fsiteLevel==3){
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
      // 存放地点
      getListArea({ flag: 10,arg1:this.$store.state.user.fsiteNo })
        .then(response => {
          this.getListfpointNo = response.data.data.list
          this.listQuery.fpointNo = response.data.data.list[0].value
        })
        .catch(() => {
          this.getListfpointNo = []
        })
    }else{
      // 存放地点
      getListArea({ flag: 10 })
        .then(response => {
          this.getListfpointNo = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNo = []
        })
    }

    this.timer()
  },
  methods: {
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    timer() {
      return setInterval(()=>{
        this.handleFilter()
      },1000)
    },
    handleFilter: function() {
      // this.listQuery.fpointNo = this.$store.state.user.fsiteNo
      if (this.$route.fullPath !== '/qualityEqt.vue') {
        // window.clearTimeout(this.refreshData); this.refreshData = null;
        clearInterval(this.timer);
        this.timer = null;
        return
      }
      listQualityEqtData(this.listQuery)
        .then(response => {
          // this.dataList = [
          //   {fmacno: '123456789012', isOpen: 1, isAlarming: 1, state: 'w', weight: 3.2,
          //     details: [{setWeight: 3.1, actWeight: 3.2, gear: 1, count: 2, begDate: '2021.05.17 10:36:28', endDate: '2021.05.17 10:37:49'},
          //     {setWeight: 3.1, actWeight: 3.2, gear: 1, count: 2, begDate: '2021.05.17 10:36:28', endDate: '2021.05.17 10:37:49'}]},
          //   {fmacno: '123456789013', isOpen: 1, isAlarming: 0, state: 'o', weight: 2.7,
          //     details: [{setWeight: 2.8, actWeight: 2.7, gear: 1, count: 2, begDate: '2021.05.17 10:34:28', endDate: '2021.05.17 10:35:49'},
          //       {setWeight: 2.5, actWeight: 2.6, gear: 1, count: 2, begDate: '2021.05.17 10:32:28', endDate: '2021.05.17 10:33:49'}]}
          //       ]
          this.dataList = response.data.data.list
        })
        .catch(() => {
          this.dataList = []
        })
    },

    // 搜索地点弹出框
    searchDialoglab(value) {
      this.labFlag = value
      if(value === 'add'){
        this.labDialogFsiteNo = this.dataForm.fsiteNo
      }else{
        this.labDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisiblelab = true
    },

    // 地点弹出框返回值
    labDialogValue(value){
      if(this.labFlag==='add'){
        this.dataForm.fpointNo = value.lab.fpointNo
      }else{
        this.listQuery.fpointNo = value.lab.fpointNo
      }
    },

    //
    showHeadList(row){
      this.showDetails = false
    },

    //
    showDetailList(index){
      this.showDetails = true
      this.detailIndex = index
    },

    indexMethod(index) {
      index = index + 1
      return index
    }
  }/*,
  mounted () {

    let self = this

    //此方法可以监听到浏览器切换页面，也就是离开当前页面时的动态；为了保险起见，建议在beforeDestroy中也清空定时器；

    document.addEventListener('visibilitychange',() => { //浏览器tab标签切换事件
      if(document.visibilityState == 'hidden') { //状态判断 没在当前页面呆着
        self.isLeave = true;
        if(self.refreshData) window.clearTimeout(self.refreshData); self.refreshData = null;
      } else { //回来了
        self.isLeave = false;
        self.refreshData = setTimeout(self.timeRefresh, ((new Date).getTime() % 5000));
      }
    })
  }*/
}
export function listQualityEqtData(query) {
  return request({
    url: '/screen/getQualityEqtDatas',
    method: 'get',
    params: query
  })
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
